<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>物资管理</el-breadcrumb-item>
            <el-breadcrumb-item>物资列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>

        <el-form :model="Device" ref="_selectfrom">
            <el-row :gutter="5">
                <el-col :span="3">
                    <el-autocomplete
                            value-key="DeviceName"
                            class="inline-input"
                            v-model="Device.DeviceName"
                            :fetch-suggestions="DeviceNameSearch"
                            placeholder="名称"
                            :trigger-on-focus="false"
                    />
                    <!--                    <el-input placeholder="物品名称" @change="DeviceNameChange"  v-model="Device.DeviceName"></el-input>-->
                </el-col>
                <el-col :span="3">
                    <el-autocomplete
                            value-key="DeviceModel"
                            class="inline-input"
                            v-model="Device.DeviceModel"
                            :fetch-suggestions="DeviceModelSearch"
                            placeholder="规格型号"
                            :trigger-on-focus="false"
                    />
                    <!--                    <el-input placeholder="规格型号" v-model="Device.DeviceModel"></el-input>-->
                </el-col>
                <el-col :span="3">
                    <el-autocomplete
                            value-key="DeviceNumber"
                            class="inline-input"
                            v-model="Device.DeviceNumber"
                            :fetch-suggestions="DeviceNumberSearch"
                            placeholder="物品编号"
                            :trigger-on-focus="false"
                    />
                    <!--                    <el-input placeholder="物品编号" v-model="Device.DeviceNumber"></el-input>-->
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="请选择部门" v-model="Device.DepartmentId">
                        <el-option :value="0" label="归属部门"></el-option>
                        <el-option v-for="v in AllDepartment" :value="v.Id" :label="v.DepartmentName"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="一级分类" v-model="Device.DeviceCategoryIdOne"
                               @change="DeviceCategoryIdOne_change">
                        <el-option :value="0" label="一级分类"></el-option>
                        <el-option v-for="item in AllDeviceCategory" v-if="item.ParentId == 0" :value="item.Id"
                                   :label="item.DeviceCategoryName"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="二级分类" v-model="Device.DeviceCategoryIdTwo">
                        <el-option :value="0" label="二级分类"></el-option>
                        <el-option v-for="item in DeviceCategoryIdTwolis" :value="item.Id"
                                   :label="item.DeviceCategoryName"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select placeholder="物品状态" v-model="Device.State">
                        <el-option :value="0" label="状态"></el-option>
                        <el-option v-for="v in AllDeviceState" :value="v.Type" :label="v.Name"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <el-button icon="el-icon-search" @click="formdata"></el-button>
                </el-col>
            </el-row>
        </el-form>

        <el-row style="padding:10px 0px">
            <el-col>
                <el-button-group>
                    <el-button class="buttongroup" type="danger" icon="el-icon-delete" @click="BatchDelete_event">批量删除
                    </el-button>
                    <el-button class="buttongroup" type="success" icon="el-icon-circle-plus-outline"
                               @click="AddNewInboundMaterial">新增入库
                    </el-button>
                    <el-button class="buttongroup" type="info" icon="el-icon-circle-plus-outline"
                               @click="NewMaterial_delivery_dialog=true">新增出库
                    </el-button>
                    <el-button class="buttongroup" type="warning" icon="el-icon-circle-plus-outline"
                               @click="AddNewMaterialdialogEvent">新建物资
                    </el-button>
                </el-button-group>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div style="width: 100%;text-align: right">
                    <el-dropdown :hide-on-click="false" placement="bottom" style="margin: 10px">
                        <el-button plain type="success" size="mini" icon="el-icon-s-grid"/>
                        <el-dropdown-menu slot="dropdown" style="padding: 10px;width: 100px">
                            <el-checkbox v-for="(item,index) in tableShow" :label="item.title" name="type" :key="index"
                                         style="width: 100%" v-model="item.show"></el-checkbox>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-tooltip placement="bottom" style="margin: 10px" content="导出为excel文件">
                        <el-button @click="onExport" plain type="primary" size="mini" icon="el-icon-upload"/>
                    </el-tooltip>
                    <el-tooltip placement="bottom" style="margin: 10px" content="打印">
                        <el-button type="success" size="mini" id="printBtn" plain v-print="printObj" icon="el-icon-printer"/>
                    </el-tooltip>
                </div>
                <el-table :data="tableData" border stripe style="width: 100%;font-size: 14px"
                          @selection-change="SelectionChange_event" id="MaterialListTable">
                    <el-table-column type="selection" width="40" align="center"></el-table-column>
                    <el-table-column fixed type="index" label="序号" width="50" align="center"
                                     :index="indexMethod"></el-table-column>
                    <el-table-column v-if="tableShow.DeviceName.show" fixed prop="DeviceName" label="名称" align="center"
                                     show-overflow-tooltip
                                     width="120"></el-table-column>
                    <el-table-column v-if="tableShow.imgUrl.show" prop="imgUrl" label="图片" show-overflow-tooltip
                                     align="center">
                        <template slot-scope="slot">
                            <el-image
                                    v-if="slot.row.imgUrl.length"
                                    style="width: 50px; height: 50px"
                                    :src="slot.row.imgUrl[0]"
                                    :preview-src-list="slot.row.imgUrl">
                            </el-image>
                            <!--                            <el-avatar v-for="img in slot.row.imgUrl" :src="img"></el-avatar>-->
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.DeviceNumber.show" prop="DeviceNumber" label="编号"
                                     show-overflow-tooltip align="center"
                                     width="120"></el-table-column>
                    <el-table-column v-if="tableShow.StockAmount.show" prop="StockAmount" label="库存数量"
                                     show-overflow-tooltip
                                     align="center"></el-table-column>
                    <el-table-column v-if="tableShow.DeviceModel.show" prop="DeviceModel" label="规格型号"
                                     show-overflow-tooltip align="center"
                                     width="120"></el-table-column>
                    <el-table-column v-if="tableShow.Price.show" prop="Price" label="单价" show-overflow-tooltip
                                     align="center"
                                     width="120"></el-table-column>
                    <el-table-column v-if="tableShow.Unit.show" prop="Unit" label="单位" show-overflow-tooltip
                                     align="center"></el-table-column>
                    <el-table-column v-if="tableShow.Amount.show" prop="Amount" label="最大数量" show-overflow-tooltip
                                     align="center" width="100">
                        <template slot-scope="slot">
                            <label style="color: blue"> {{ slot.row.Amount }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.TotalPrice.show" prop="TotalPrice" label="最高总价"
                                     show-overflow-tooltip align="center" width="100">
                        <template slot-scope="slot">
                            <label style="color: blue"> {{ slot.row.TotalPrice }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.StockPrice.show" prop="StockPrice" label="库存金额"
                                     show-overflow-tooltip align="center" width="100">
                        <template slot-scope="slot">
                            <label style="color: green"> {{ slot.row.StockPrice }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.ConsumeAmount.show" prop="ConsumeAmount" label="消耗数量"
                                     show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            <label style="color: #1E9FFF"> {{ slot.row.ConsumeAmount }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.ConsumePrice.show" prop="ConsumePrice" label="消耗金额"
                                     show-overflow-tooltip align="center" width="100">
                        <template slot-scope="slot">
                            <label style="color: #1E9FFF"> {{ slot.row.ConsumePrice }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.DamageAmount.show" prop="DamageAmount" label="损坏数量"
                                     show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            <label style="color: red"> {{ slot.row.DamageAmount }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.DamagePrice.show" prop="DamagePrice" label="损坏金额"
                                     show-overflow-tooltip align="center" width="100">
                        <template slot-scope="slot">
                            <label style="color: red"> {{ slot.row.DamagePrice }}</label>
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.DeviceCategoryIdOne.show" prop="DeviceCategoryIdOne" label="第一类别"
                                     width="100" show-overflow-tooltip
                                     align="center">
                        <template slot-scope="slot">
                            {{ DeviceCategoryId_conversion(slot.row.DeviceCategoryIdOne) }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.DeviceCategoryIdTwo.show" prop="DeviceCategoryIdTwo" label="第二类别"
                                     width="100" show-overflow-tooltip
                                     align="center">
                        <template slot-scope="slot">
                            {{ DeviceCategoryId_conversion(slot.row.DeviceCategoryIdTwo) }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.State.show" prop="State" label="状态" width="50"
                                     show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ State_conversion(slot.row.State) }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.PurchaseDate.show" prop="PurchaseDate" label="创建日期" width="120"
                                     show-overflow-tooltip align="center">
                        <template slot-scope="slot">
                            {{ PurchaseDate_conversion(slot.row.PurchaseDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column v-if="tableShow.PurchaseCause.show" prop="PurchaseCause" label="备注" width="120"
                                     show-overflow-tooltip
                                     align="center"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="145" align="center">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" plain type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini" plain @click="BatchDeleteOne_event(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination
                            @size-change="formdata"
                            @current-change="formdata"
                            :current-page.sync="pagination.currentPage"
                            :page-sizes="pagination.pagesizes"
                            :page-size.sync="pagination.pagesize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="Device_details_dialog" :modal="false" width="80%" top="10px" title="物资详情"
                   @close="clear_Device_details_dialog">
            <UpdataMaterial ref="UpdataMaterial_ref" :all-department="AllDepartment"
                            :all-device-category="AllDeviceCategory" :all-device-state="AllDeviceState"
                            :device_details="Device_details"></UpdataMaterial>
        </el-dialog>

        <el-dialog :visible.sync="Material_storage_dialog" width="80%" title="物资入库" top="10px"
                   @close="Material_storage_dialog_close_event">
            <MaterialStorage ref="MaterialStorage_ref" :all-device-state="AllDeviceState"
                             :all-device-category="AllDeviceCategory" :all-department="AllDepartment"></MaterialStorage>
        </el-dialog>

        <el-dialog :visible.sync="NewMaterial_delivery_dialog" width="80%" title="物资出库" top="10px"
                   @close="NewMaterial_delivery_dialog_close_event">
            <NewMaterialDelivery ref="NewMaterial_delivery_ref" :all-device-state="AllDeviceState"
                                 :all-device-category="AllDeviceCategory"
                                 :all-department="AllDepartment"></NewMaterialDelivery>
        </el-dialog>

        <el-dialog :visible.sync="AddNewMaterial_dialog" v-if="AddNewMaterial_dialog" width="80%" title="新建物资" top="10px">
            <AddNewMaterial ref="AddNewMaterial_ref" :all-department="AllDepartment"
                            :all-device-category="AllDeviceCategory" :all-device-state="AllDeviceState"
                            :get-new-device="getnewdeviceFunction"></AddNewMaterial>
        </el-dialog>
    </div>
</template>

<script>
    import * as publicjs from "/public/Scriput/Public"
    import UpdataMaterial from "./UpdataMaterial"
    import MaterialStorage from "./MaterialStorage";
    import NewMaterialDelivery from "./NewMaterialDelivery";
    import AddNewMaterial from "./AddNewMaterial";

    export default {
        name: "MaterialList",
        components: {
            'UpdataMaterial': UpdataMaterial,
            'MaterialStorage': MaterialStorage,
            'NewMaterialDelivery': NewMaterialDelivery,
            'AddNewMaterial': AddNewMaterial,
        },
        data() {
            return {
                //表格数据
                tableData: [],
                //分页数据绑定
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 100
                },
                //表格查询数据
                Device: {
                    DeviceName: '', //物品名称
                    DeviceNumber: '', //物品编号
                    DepartmentId: 0, //领用部门ID
                    DeviceCategoryIdOne: 0, //一级分类
                    DeviceCategoryIdTwo: 0, //二级分类
                    State: 0, //物品状态
                    DeviceModel: '', //物品规格型号
                },
                //多选列表的数据集合
                SelectMore_lis: [],
                //所有部门数据
                AllDepartment: [],
                //物品状态
                AllDeviceState: [],
                //所有物资分类
                AllDeviceCategory: [],
                DeviceCategoryIdTwolis: [],
                //单行表格数据(用于修改页面的数据)
                Device_details: {},
                //修改页面的显示
                Device_details_dialog: false,
                //物资入科的显示
                Material_storage_dialog: false,
                //新建物资出库
                NewMaterial_delivery_dialog: false,
                //新建物资
                AddNewMaterial_dialog: false,
                // 全部数据
                AllData: [],
                tableShow: {
                    DeviceName: {
                        show: true,
                        title: "名称"
                    },
                    imgUrl: {
                        show: true,
                        title: "图片"
                    },
                    DeviceNumber: {
                        show: true,
                        title: "编号"
                    },
                    StockAmount: {
                        show: true,
                        title: "库存数量"
                    },
                    DeviceModel: {
                        show: true,
                        title: "规格型号"
                    },
                    Price: {
                        show: true,
                        title: "单价"
                    },
                    Unit: {
                        show: true,
                        title: "单位"
                    },
                    Amount: {
                        show: true,
                        title: "最大数量"
                    },
                    TotalPrice: {
                        show: true,
                        title: "最高总价"
                    },
                    StockPrice: {
                        show: true,
                        title: "库存金额"
                    },
                    ConsumeAmount: {
                        show: true,
                        title: "消耗数量"
                    },
                    ConsumePrice: {
                        show: true,
                        title: "消耗金额"
                    },
                    DamageAmount: {
                        show: true,
                        title: "损坏数量"
                    },
                    DamagePrice: {
                        show: true,
                        title: "损坏金额"
                    },
                    DeviceCategoryIdOne: {
                        show: true,
                        title: "第一类别"
                    },
                    DeviceCategoryIdTwo: {
                        show: true,
                        title: "第二类别"
                    },
                    State: {
                        show: true,
                        title: "状态"
                    },
                    PurchaseDate: {
                        show: true,
                        title: "创建日期"
                    },
                    PurchaseCause: {
                        show: true,
                        title: "备注"
                    },
                },
                printObj: {
                    id: 'MaterialListTable',
                    popTitle: ''
                }
            }
        },
        created() {
            this.formdata()
            let loadding = this.openLoading();
            this.$http.post('Device/GetDeviceDetail', {
                currentPage: 1,
                pagesize: 1000000,
                Device: this.Device,
            }).then(res => {
                loadding.close();
                this.AllData = res.data.data
            }).catch(() => {
                loadding.close();
                this.$message.error('服务器异常,请联系管理员!')
            })
            this.AllDepartment = publicjs.GetAllDepartment(this.$http)
            this.AllDeviceState = publicjs.GetAllDeviceState(this.$http)
            this.AllDeviceCategory = publicjs.GetAllDeviceCategory(this.$http)
        },
        methods: {
            //初始化表格数据加载
            formdata() {
                let loadding = this.openLoading();
                this.$http.post('Device/GetDeviceDetail', {
                    currentPage: this.pagination.currentPage,
                    pagesize: this.pagination.pagesize,
                    Device: this.Device,
                }).then(res => {
                    loadding.close();
                    this.pagination.total = res.data.count
                    this.tableData = res.data.data
                    console.log(this.tableData);
                }).catch(() => {
                    loadding.close();
                    this.$message.error('服务器异常,请联系管理员!')
                })
            },
            //表格书库编辑按钮
            async handleClick(obj) {
                let result = await publicjs.Isjurisdiction(this.$http, 'DeviceUpdateRight')
                if (result) {
                    this.Device_details_dialog = true
                    this.Device_details = obj
                } else {
                    this.$message.warning('您不具有当前操作的权限，请联系系统管理员')
                }
            },
            //表格数据序列号
            indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
            //表格数据选择事件
            SelectionChange_event(value) {
                this.SelectMore_lis = value
            },
            //表格单个删除
            BatchDeleteOne_event(obj) {
                this.SelectMore_lis.push(obj)
                this.BatchDelete_event()
            },
            //批量删除
            async BatchDelete_event() {
                let result = await publicjs.Isjurisdiction(this.$http, 'DeviceDeleteRight')
                if (!result) {
                    this.$message.warning('您不具有当前操作的权限，请联系系统管理员')
                    return
                }
                let idlis = []
                let delect_bool = true
                if (this.SelectMore_lis.length == 0) {
                    this.$message.warning('您还未选择需要删除的设备!')
                } else {
                    for (let i = 0; i < this.SelectMore_lis.length; i++) {
                        idlis.push(this.SelectMore_lis[i].Id)
                        if (this.SelectMore_lis[i].Amount > this.SelectMore_lis[i].StockAmount) {
                            this.$message.warning(this.SelectMore_lis[i].DeviceName + '存在未归还的物资，不能直接删除!')
                            delect_bool = false
                            break;
                        }
                    }
                    if (delect_bool) {
                        this.$confirm('你确定要删除吗?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'error'
                        }).then(() => {
                            let loadding = this.openLoading();
                            this.$http.post('Device/DeleteDeviceContent', idlis).then(res => {
                                loadding.close();
                                if (res.data.IsSuccess) {
                                    this.$message.success(res.data.Msg)
                                    this.formdata()
                                    this.SelectMore_lis = []
                                } else {
                                    this.$message.warning(res.data.Msg)
                                }
                            }).catch(() => {
                                loadding.close();
                                this.$message.error('服务器异常,请联系管理员!')
                            })
                        }).catch(() => {
                            this.$message.info('已取消!')
                            this.SelectMore_lis = []
                        })
                    }
                }
            },
            //物资状态转化
            State_conversion(val) {
                let msg = ""
                switch (val) {
                    case 1:
                        msg = "正常"
                        break;
                    case 2:
                        msg = "损坏"
                        break;
                    case 4:
                        msg = "报废"
                        break;
                    case 8:
                        msg = "维修"
                        break;
                }
                return msg
            },
            //创建时间转化
            PurchaseDate_conversion(val) {
                return (val.split(' '))[0]
            },
            //物资分类转化
            DeviceCategoryId_conversion(val) {
                for (let i = 0; i < this.AllDeviceCategory.length; i++) {
                    if ((this.AllDeviceCategory)[i].Id == val) {
                        return (this.AllDeviceCategory)[i].DeviceCategoryName
                    }
                }
            },
            //物资出库弹框关闭
            NewMaterial_delivery_dialog_close_event() {
                this.$refs['NewMaterial_delivery_ref'].dialog_close()
            },
            //物资入库弹框关闭
            Material_storage_dialog_close_event() {
                this.$refs['MaterialStorage_ref'].dialog_close()
            },
            //清空表格
            clear_Device_details_dialog() {
                this.$refs['UpdataMaterial_ref'].zj_imagelist()
            },
            //二级分类
            DeviceCategoryIdOne_change(val) {
                this.Device.DeviceCategoryIdTwo = 0
                let newlis = []
                this.AllDeviceCategory.forEach(v => {
                    if (v.ParentId == val) {
                        newlis.push(v)
                    }
                })
                this.DeviceCategoryIdTwolis = newlis
            },
            //新增入库
            async AddNewInboundMaterial() {
                let result = await publicjs.Isjurisdiction(this.$http, 'DeviceInboundRight')
                if (!result) {
                    this.$message.warning('您不具有当前操作的权限，请联系系统管理员')
                    return
                }
                this.Material_storage_dialog = true
            },
            //新建物资判断权限
            async AddNewMaterialdialogEvent() {
                let result = await publicjs.Isjurisdiction(this.$http, 'DeviceUpdateRight')
                if (!result) {
                    this.$message.warning('您不具有当前操作的权限，请联系系统管理员')
                    return
                }
                this.AddNewMaterial_dialog = true
            },
            //新建物资后的带入方法
            getnewdeviceFunction() {
                this.formdata()
                this.AddNewMaterial_dialog = false
            },
            DeviceNameSearch(queryString, cb) {
                var results = queryString ? this.AllData.filter(this.createFilter(queryString, "DeviceName")) : this.AllData;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            DeviceModelSearch(queryString, cb) {
                var results = queryString ? this.AllData.filter(this.createFilter(queryString, "DeviceModel")) : this.AllData;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            DeviceNumberSearch(queryString, cb) {
                var results = queryString ? this.AllData.filter(this.createFilter(queryString, "DeviceNumber")) : this.AllData;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString, key) {
                return (restaurant) => {
                    return (restaurant[key].toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
                };
            },
            // 导出数据
            onExport() {
                let data = [];
                let columns = [
                    {
                        title: "序号",
                        dataIndex: "keyIndex",
                    }
                ]
                for (let k in this.tableShow) {
                    columns.push({
                        title: this.tableShow[k].title,
                        dataIndex: k,
                    })
                }
                for (let i = 0; i < this.tableData.length; i++) {
                    data.push(this.tableData[i]);
                    data[data.length - 1].keyIndex = i + 1;
                    data[data.length - 1].DeviceCategoryIdOne = this.DeviceCategoryId_conversion(this.tableData[i].DeviceCategoryIdOne)
                    data[data.length - 1].DeviceCategoryIdTwo = this.DeviceCategoryId_conversion(this.tableData[i].DeviceCategoryIdTwo)
                    data[data.length - 1].State = this.State_conversion(this.tableData[i].State)
                    data[data.length - 1].PurchaseDate = this.PurchaseDate_conversion(this.tableData[i].PurchaseDate)
                }
                publicjs.exportTable("物资列表", data, columns)
            },
        }
    }
</script>

<style scoped>

</style>
